<template>
  <div>
    <!-- 指令都是通过 v-xxx 调用 -->
    <input type="text" v-gfocus>
    <!-- 没有传值 -->
    <h2 v-color>小马你很成功</h2>
    <!-- 传递了一个字符串 -->
    <h3 v-color="'aqua'">设置一种颜色</h3>
    <!-- 传递了一个变量 -->
    <p v-color="myColor">通过自定义指令设置其他颜色</p>
    <!-- 修改变量看页面效果 -->
    <button @click=" myColor='yellow' ">改成黄色</button>
    <button @click=" myColor='pink' ">改成粉色</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myColor: "blue",
    };
  },
  // 在 directives 结构中书写自定义指令，在当前 vue 文件内生效
  directives: {
    color: {
      // 🔔 当被绑定的元素插入到DOM中的时候调用<一次>
      inserted(el, binding) {
        // console.log(binding);
        el.style.color = binding.value || "green";
      },
      // 🔔 值或者模板发生更新时触发
      update(el, binding) {
        // console.log(binding.value);
        el.style.color = binding.value;
      },
    },
  },
};
</script>

<style>
</style>